@import 'variables';
@import './mixins/button-icon';

$colorDarken: $gray-700;
$borderHeight: 1rem/16;
$alphaBackgroundColor: 0.08;

.btn {
  padding: calc(#{$space-x3} - 1px) $space-x6;
  border-radius: $space-x3;
  white-space: nowrap;
  font-weight: 500;
  font-size: $font-size-base;
  line-height: $font-size-base;
  text-decoration: none;
  display: inline-block;

  &.outline {
    padding: calc(#{$space-x3} - 1px) $space-x6;
  }

  &.text {
    padding: calc(#{$space-x3} - 1px) $space-x6;
  }

  &.inversion {
    padding: calc(#{$space-x3} - 1px) $space-x6;
  }

  &.link {
    padding: $space-x1 0;
  }

  &.is-active,
  &:focus,
  &:active,
  &:hover {
    outline: none;
    text-decoration: none;
  }

  svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  &.icon-left {
    svg {
      margin-right: $space-x2;
      margin-left: -$i-space-x1;
    }
  }

  &.icon-right {
    svg {
      order: 1;
      margin-right: -$i-space-x1;
      margin-left: $space-x2;
    }
  }

  &.icon-left,
  &.icon-right,
  &.xs.icon-left,
  &.xs.icon-right,
  &.sm.icon-left,
  &.sm.icon-right,
  &.lg.icon-left,
  &.lg.icon-right,
  &.xl.icon-left,
  &.xl.icon-right {
    &.resize-in-mobile {
      @media (max-width: map_get($grid-breakpoints, sm)) {
        @include button-icon-template;
        @include button-icon-svg-default-template;
        .button-content {
          display: none;
        }
      }
    }
  }

  &.xs {
    padding: calc(#{$space-x1} - 1px) $space-x2;
    font-size: 14px;
    line-height: 16px;

    &.outline {
      padding: calc(#{$space-x1} - 1px) $space-x2;
    }

    &.inversion {
      padding: calc(#{$space-x1} - 1px) $space-x2;
    }

    &.text {
      padding: calc(#{$space-x1} - 1px) $space-x1;
    }

    &.link {
      font-size: 13px;
      line-height: 16px;
      padding: $space-x1 0;
    }

    svg {
      width: 1rem !important;
      height: 1rem !important;
    }

    &.icon-left {
      svg {
        margin-right: $space-x1;
      }
    }

    &.icon-right {
      svg {
        order: 1;
        margin-left: $space-x1;
      }
    }
  }

  &.sm {
    padding: calc(#{$space-x2} - 1px) $space-x4;
    font-size: 14px;
    line-height: 16px;

    &.outline {
      padding: calc(#{$space-x2} - 1px) $space-x4;
    }

    &.inversion {
      padding: calc(#{$space-x2} - 1px) $space-x4;
    }

    &.text {
      padding: calc(#{$space-x2} - 1px) $space-x2;
    }

    &.link {
      font-size: 13px;
      line-height: 16px;
      padding: $space-x1 0;
    }

    svg {
      width: 1rem !important;
      height: 1rem !important;
    }

    &.icon-left {
      svg {
        margin-right: $space-x2;
      }
    }

    &.icon-right {
      svg {
        order: 1;
        margin-left: $space-x2;
      }
    }
  }

  &.lg {
    padding: calc(#{$space-x3} - 1px) $space-x6;
    font-size: 20px;
    line-height: 24px;
    height: 3rem;

    &.outline {
      padding: calc(#{$space-x3} - 1px) $space-x6;
    }

    &.inversion {
      padding: calc(#{$space-x3} - 1px) $space-x6;
    }

    &.text {
      padding: calc(#{$space-x3} - 1px) $space-x6;
    }

    &.link {
      font-size: 13px;
      line-height: 16px;
      height: auto;
      padding: $space-x1 0;
    }

    svg {
      width: 1.5rem !important;
      height: 1.5rem !important;
    }

    &.icon-left {
      svg {
        margin-right: $space-x2;
        margin-left: -$i-space-x1;
      }
    }

    &.icon-right {
      svg {
        order: 1;
        margin-right: -$i-space-x1;
        margin-left: $space-x2;
      }
    }
  }

  &.xl {
    padding: calc(#{$space-x4} - 1px) $space-x8;
    font-size: 28px;
    line-height: 32px;
    height: 4rem;

    &.outline {
      padding: calc(#{$space-x4} - 1px) $space-x8;
    }

    &.inversion {
      padding: calc(#{$space-x4} - 1px) $space-x8;
    }

    &.text {
      padding: calc(#{$space-x4} - 1px) $space-x8;
    }

    &.link {
      font-size: 13px;
      line-height: 16px;
      height: auto;
      padding: $space-x1 0;
    }

    svg {
      width: 2rem !important;
      height: 2rem !important;
    }

    &.icon-left {
      svg {
        margin-right: $space-x2;
        margin-left: -$i-space-x1;
      }
    }

    &.icon-right {
      svg {
        order: 1;
        margin-right: -$i-space-x1;
        margin-left: $space-x2;
      }
    }
  }

  .button-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @each $name, $color in $theme-colors {
    &.#{$name} {
      background-color: $color;
      color: color-yiq($color, $colorDarken, $white);
      //color: $white;
      border: 1px solid $color;

      path {
        fill: color-yiq($color, $colorDarken, $white) !important;
      }

      &.resize-in-mobile {
        @media (max-width: map_get($grid-breakpoints, sm)) {
          background-color: transparent;
          svg {
            path {
              fill: $color !important;
            }
          }
        }
      }

      &.is-active,
      &:focus,
      &:active,
      &:hover {
        $backgroundColor: darken($color, 8%);
        background-color: $backgroundColor;
        color: darken(color-yiq($backgroundColor, $colorDarken, $white), 8%);
        border-color: $backgroundColor;

        path {
          fill: color-yiq($color, $colorDarken, $white) !important;
        }

        &.resize-in-mobile {
          @media (max-width: map_get($grid-breakpoints, sm)) {
            background-color: rgba($primary, $alphaBackgroundColor);
            outline: none;
          }
        }
      }

      &.hover-light {
        &:focus {
          outline: 2px solid rgba($color, 0.56);
        }

        &.is-active,
        &:active,
        &:hover {
          background-color: rgba($white, 0.08);
          outline: none;
        }
      }

      &.hover-dark {
        //&:focus,
        &:active,
        &:hover {
          background-color: rgba($black, 0.08);
          outline: none;
        }
      }

      &:disabled,
      &.disabled {
        background-color: rgba($color, 0.56);
        border: 1px solid rgba($color, 0);
        color: color-yiq($color, $colorDarken, $white);
        cursor: default;

        path {
          fill: color-yiq($color, $colorDarken, $white) !important;
        }

        &.resize-in-mobile {
          @media (max-width: map_get($grid-breakpoints, sm)) {
            &:disabled {
              @include button-icon-disabled-template;
            }
          }
        }
      }

      &.outline,
      &.text {
        color: $color;
        background-color: transparent;
        border: 1px solid transparent;

        path {
          fill: $color !important;
        }

        &.text:hover {
          border: 1px solid rgba($color, 0);
        }

        &:focus{
          outline: 2px solid rgba($color, 0.56);
        }
        &.is-active,
        &:active,
        &:hover {
          background-color: rgba($color, 0.25);
          outline: none;
        }

        &.outline:disabled,
        &.outline.disabled {
          background-color: rgba($color, 0.12);
          border: 1px solid rgba($color, 0);
          color: $gray-600;
          cursor: default;

          path {
            fill: $gray-600 !important;
          }
        }

        &.text:disabled,
        &.text.disabled {
          background-color: transparent;
          color: $gray-500;
          cursor: default;

          path {
            fill: $gray-500 !important;
          }
        }
      }

      &.inversion {
        color: $color;
        background-color: $white;
        border: 1px solid $white;

        path {
          fill: $color !important;
        }

        &:focus,
        &:active,
        &:hover {
          background-color: mix($white, rgba($color, 0.24), 75%);
          border: 1px solid transparent;
          outline: none;
        }

        &:disabled,
        &.disabled {
          color: $color;
          background-color: $white;
          border: 1px solid $white;
          opacity: 0.32;
          cursor: default;

          path {
            fill: $gray-600 !important;
          }
        }
      }

      &.link {
        color: $color;
        background-color: transparent;
        border: 1px solid transparent;

        path {
          fill: $color !important;
        }

        &:focus,
        &:active,
        &:hover {
          text-decoration-line: underline;
          outline: none;
        }

        &:disabled,
        &.disabled {
          background-color: transparent;
          color: rgba($color, 0.3);
          cursor: default;
          text-decoration-line: none;
        }
      }

      &.outline {
        border: 1px solid $color;
      }
    }
  }
}

.btn-border {
  border-radius: 180px;
}

.button-toggle-label {
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 0.75rem;
}

.active-button {
  padding: $space-x2 $space-x4;
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  border-radius: $space-x1;
  width: 4.5rem;

  &.active-lg {
    font-size: 16px;
    padding: calc(#{$space-x3} - 1px) $space-x6;
  }

  &.active-state {
    background-color: #5cb75c;
    color: $white;
    border-color: #5cb75c;

    &:active,
    &:hover,
    &:focus {
      background-color: #469a46 !important;
      color: $white !important;
      border-color: #469a46 !important;
      box-shadow: none !important;
    }
  }

  &.in-active-state {
    background-color: $gray-200;
    color: $gray-900;
    border-color: $gray-200;

    &:active,
    &:hover,
    &:focus {
      background-color: $gray-500 !important;
      color: $white !important;
      border-color: $gray-500 !important;
      box-shadow: none !important;
    }
  }
}

.button-icon-badge {
  position: relative;

  .badge {
    position: absolute;
    left: 16px;
    top: 12px;
  }
}

.button-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;

  &.group-vertical {
    flex-direction: column;
  }
}
